<script setup lang="ts">
import { getHotItem } from '@/service/JuejinSkeletonHotService'
import { onMounted, ref } from 'vue'

export interface IHotItem {
  index: number
  title: string
  href: string
}

const hotItem = ref<IHotItem[]>([])

const getdata = async () => {
  hotItem.value = []
  hotItem.value = await getHotItem()
}

defineExpose({
  getdata,
})

onMounted(getdata)
</script>


<template>
  <div class="skeleton">
    <li
      class="hot-item hot-item-article"
      v-for="item in hotItem"
      :key="item.index"
    >
      <div
        class="body-index"
        :class="{
          'first-index': item.index == 1,
          'second-index': item.index == 2,
          'third-index': item.index == 3,
        }"
      >
        {{ item.index }}
      </div>
      <div class="hot-item-text hot-item-text-article">
        <a
          href="/post/7434373084747333658"
          class="title-articles"
          target="_blank"
          :title="item.title"
        >
          {{ item.title }}
        </a>
        <a
          href="/post/7434373084747333658"
          class="info"
          target="_blank"
          :title="item.title"
        ></a>
        <!---->
      </div>
    </li>
  </div>
</template>
<style scoped lang="scss">
.hot-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  &:hover {
    background-color: #f7f8fa;
  }

  .body-index {
    font-weight: 800;
    min-width: 18px;
    line-height: 22px;
    margin: 0 0.92rem 0 0;
    color: #8a919f;
    font-family: Archivo;
    text-align: left;
  }

  .hot-item-text {
    color: #252933;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
  }

  .hot-item-text-article {
    display: flex;
    align-items: center;
  }
  .title-articles {
    color: #252933;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .first-index {
    background: linear-gradient(
      180deg,
      #f64242 20%,
      rgba(246, 66, 66, 0.4) 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .second-index {
    background: linear-gradient(
      180deg,
      #ff7426 20%,
      rgba(255, 116, 38, 0.4) 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .third-index {
    background: linear-gradient(
      180deg,
      #ffac0c 20%,
      rgba(255, 172, 12, 0.4) 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
</style>
